/**
 * 设备运营信息
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import _ from 'lodash';
import { Button, Input, Card, Row, Col, Form, Switch, InputNumber, Select, Icon } from 'antd';
import AreaSelect from '../../components/areaSelect';
import { stringJoin } from '../../utils/util';
import SelectTable from './selectTable';
import { deviceEditMode } from '../../services/device';
import { isSuccess } from '../../configs/error';

const Option = Select.Option;
const FormItem = Form.Item;

const styles = {
    rowStyle: {
        paddingTop: '15px'
    },
    colStyle: {
        border: '1px solid #cccccc',
        padding: '0px',
        paddingBottom: '30px',
        marginBottom: '20px',
        marginRight: '15px'
    },
    tt: {
        backgroundColor: '#3a94d2',
        padding: '4px 8px',
    },
    ht: {
        display: 'inline-block',
        color: 'white',
    },
    ic: {
        float: 'right',
        color: 'white',
        marginTop: '4px',
        cursor: 'pointer'
    },
    it: {
        padding: '4px 8px',
    },
    ct: {
        textAlign: 'center',
        padding: '20px 10px'
    }
};

class DetailOperationInfo extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            selectedMode: {},
            serviceMode: []
        };
    }

    componentWillReceiveProps(nextProps) {
        const { detailData } = nextProps.device;
        if (this.props.device.detailData !== detailData) {
            if (!!detailData) {
                this.setState({ serviceMode: detailData.serviceMode });
            }
        }
    }

    parseServiceDetails = (arr, unit) => {
        if (!arr || !arr.length) return;
        let result = '';
        arr.forEach((obj) => {
            result += `${obj.num + unit + obj.price}元   `;
        });
        return result;
    }

    add = (v) => {
        const { dispatch } = this.props;
        this.setState({ isAdd: v });
        dispatch({ type: 'device/showModal' });
    }
    delect = async (v) => {
        const { serviceMode } = this.state;
        const { device: { detailData = {} }, dispatch } = this.props;
        const { sno } = detailData;
        const arr = serviceMode.filter(val => val.serviceId !== v);
        const serviceModeId = arr.map(v => v.serviceId);
        const res = await deviceEditMode({
            serviceModeId,
            sno
        });
        if (isSuccess(res)) {
            this.setState({ serviceMode: arr });
        }
    }

    editMode = async (v) => {
        const { device: { detailData = {} }, dispatch, user } = this.props;
        const { sno } = detailData;
        let { serviceMode } = this.state;
        const { isAdd } = this.state;
        if (!serviceMode) serviceMode = [];
        let serviceModeId = [];
        if (!isAdd) serviceModeId = [v[0].id];
        else {
            serviceModeId = serviceMode.map(s => s.serviceId);
            v.forEach(val => {
                if (!serviceModeId.includes(val)) {
                    serviceModeId.push(val.id);
                }
            });
        }
        // console.log(v);
        // console.log(serviceModeId);
        const res = await deviceEditMode({
            serviceModeId,
            sno
        });
        if (isSuccess(res)) {
            dispatch({ type: 'device/hideModal' });
            v.forEach(val => {
                val.serviceId = val.id;
                val.serviceName = val.serviceMode;
            });
            if (isAdd) {
                v.forEach(val => {
                    if (!serviceMode.some(ss => ss.serviceId === val.serviceId)) {
                        serviceMode.push(val);
                    }
                });
            } else serviceMode = v;
            this.setState({ serviceMode });
        }
    }

    render() {
        const { serviceMode } = this.state;
        const { device: { detailData = {} } } = this.props;
        const { canAddMoreServiceMode, sno } = detailData;
        console.log('serviceMode', serviceMode);
        return (
            <div>
                <Form layout="vertical">
                    <SelectTable modeType={false} isDetail multiselect={canAddMoreServiceMode} editMode={(v) => this.editMode(v)} />
                    <Row gutter={16} style={styles.rowStyle}>
                        <Col span={2}><h3 >收费模式</h3></Col>
                        {!canAddMoreServiceMode && serviceMode && serviceMode.length ? null : <Button onClick={() => this.add(1)} icon="plus">添加</Button>}
                        {!canAddMoreServiceMode && serviceMode && serviceMode.length ? <Button onClick={() => this.add(0)} icon="sync">替换</Button> : null}
                    </Row>
                    <Row style={styles.rowStyle}>
                        {
                            serviceMode && serviceMode.length ? (
                                serviceMode.map(v => {
                                    return (
                                        <Col span={7} style={styles.colStyle} key={v.serviceId}>
                                            <div style={styles.tt}>
                                                <h3 style={styles.ht}>{v.serviceName}</h3><Icon type="delete" style={styles.ic} onClick={() => this.delect(v.serviceId)} />
                                            </div>
                                            <div style={styles.it}><span>收费类型：</span>{v.serviceType}</div>
                                            <div style={styles.it}><span>收费价格：</span>{this.parseServiceDetails(v.priceAndNumDtoList, v.unit)}</div>
                                            <div style={styles.it}><span>基础单价：</span>{`1${v.unit}${v.unitPrice}元`}</div>
                                            <div style={styles.it}><span> 创建者：</span>{v.sysUserName}</div>
                                        </Col>
                                    );
                                })
                            ) : (
                                    <div style={styles.ct}>当前设备暂无收费模式</div>
                                )
                        }
                    </Row>
                </Form>
            </div>
        );
    }
}

DetailOperationInfo.propTypes = {
};

export default connect(({ device, serviceMode, deviceLaunchArea, app }) => ({ device, serviceMode, deviceLaunchArea, user: app.user }))(DetailOperationInfo);
